/* @import url(); 引入css类 */
@imgUrl: '../../../assets/largeScreen-img';
/deep/ .df{
  display: flex;
}
/deep/ .ai{
  align-items: center;
}
/deep/ .jc{
  justify-content: space-between;
}
/deep/ p{
  margin:0;
  padding:0;
}
.screen-container {
  width: 100%;
  height: 100%;
  background: url('@{imgUrl}/u0.png') no-repeat;
  background-size: 100% 100%;
}
 .header {
  width: 100%;
  height: 60px;
  color: #fff;
  padding-top:6px;
  background: url('@{imgUrl}/u1.png') no-repeat 0 6px;
  background-size: 100% 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}
/deep/ .screen-container-main {
  color:#C1C1C1;
  display: flex;
  justify-content: space-between;
  height: 58%;
  margin:0 1% 2%;
  .screen-container-main-left,.screen-container-main-right{
    width:30%;
    .school,.out-work,.sport,.area{
      height: 50%;
      margin-bottom: 3%;
      .main-title{
        padding-left: 6%;
        margin-bottom: 10px;
      }
    }
    .school{
      height: 52%;
      margin-bottom: 3%;
      &-decoration{
        width:56px;
        height:56px;
        border:1px solid #21FFF5;
        border-radius: 56px;
        margin-right: 15px;
        img{
          width:22px;height: 22px;
        }
      }
      &-msg{
        p{
          margin:2.2% 0;
          line-height: 25px;
          text-indent: 2em;
          font-size: 12px;
          text-align: justify;
          
        }
      }
      &-img{
        img{
          width:96px;
          height: 50px;
          background: #fff;
        }
      }
    }
    .out-work-content{
      .take-notes-img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        .take-notes-data {
          color: #33B6A4;
          margin: 0 2px;
        }
    }
    .area{
      .area-tab-active{
        color: #f5f5f5;
        opacity: 1 !important;
      }
      .area-tab{
        ul,li{
          list-style-type: none;
          margin:0;
          padding:0;
        }
        ul {
          li{
            width:30%;
            height: 30px;
            background: url('@{imgUrl}/tab_label_3_u96.svg') no-repeat;
            text-align: center;
            background-size: 100% 100%;
            line-height: 30px;
            cursor: pointer;
            opacity: 0.6;
          }
        }
      }
      /deep/ .area-content{
        .dv-scroll-ranking-board .ranking-column .inside-column{
          height: 8px;
          border-radius: 0 5px 5px 0;
          background: linear-gradient(to right, #3a5dff , #2ec7cf);
          margin: 0;
        }
        .dv-scroll-ranking-board .ranking-column{
          border-bottom: none;
          background: #0f1341;
          border-radius: 4px;
        }
      }
    }
  }
  &-center{
    width:40%;
    margin: 1%;
    .environment{
      height: 35%;
      &-decoration{
        position: relative;
        .decoration-12{
          position: absolute;
          top:0;
        }
        .decoration-img{
          width:32px;
          height: 32px;
        }
        p{
          text-align: center;
        }
      }
    }
    .video{
      height: 72%;
    }
    .main-title{
      padding-left: 5%;
      margin-bottom: 10px;
    }
  }
  &-content {
    height: 100%;
    padding: 2.5% 4%;
  }
}

/deep/ .footer{
  height: 30%;
  margin:0 1%;
  color:#C1C1C1;
  &-title{
    font-size: 16px;
  }
  .screen-container-main-content{
    padding:1%;
  }
  .screen-container-main-title{
    padding-left: 1.5%;
  }
}
/deep/ .screen-container-main-title {
  background: url('@{imgUrl}/u28.png') no-repeat 0% 50%;
  color: #21FFF5;
  padding-left: 5.5%;
  margin-bottom: 5px;
  font-size: 16px;
}